﻿@page "/docs/components/numeric"

<Seo Canonical="/docs/components/numeric" Title="Blazorise NumericEdit system" Description="Use NumericEdit to have a field for any kind if numeric values." />

<DocsPageTitle>
    NumericEdit component
</DocsPageTitle>

<DocsPageParagraph>
    A native numeric <Code Tag>input</Code> component built around the <Code>type="number"</Code>.
</DocsPageParagraph>

<DocsPageParagraph>
    Being built around native <Code>type="number"</Code> input element, the <Code>NumericEdit</Code> component
    comes with a few limitations that you must be aware of. First and foremost, the input display format is fully
    controlled by the browser and the system locale. This means that for you to change the input format you would
    need to change the browser settings.
</DocsPageParagraph>

<DocsPageParagraph>
    Use <Code Tag>NumericEdit</Code> to have a field for any kind of numeric values.
    All basic types are supported, including nullable types
    (<Code>int</Code>, <Code>long</Code>, <Code>float</Code>, <Code>double</Code>, <Code>decimal</Code>, etc.).
</DocsPageParagraph>

<DocsPageSubtitle>
    Examples
</DocsPageSubtitle>

<DocsPageSection>
    <DocsPageSectionHeader Title="Basic">
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <BasicNumericEditExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="BasicNumericEditExample" />
</DocsPageSection>

<DocsPageSubtitle>
    Rules
</DocsPageSubtitle>

<DocsPageSection>
    <DocsPageSectionHeader Title="Generic type">
        Since <Code>NumericEdit</Code> is a generic component you will have to specify the exact data type for the value.
        Most of the time it will be recognized automatically when you set the <Code>Value</Code> attribute, but if
        not you will just use the <Code>TValue</Code> attribute and define the type manually eg.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <NumericEditGenericExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="NumericEditGenericExample" />
</DocsPageSection>

<DocsPageSubtitle>
    Attributes
</DocsPageSubtitle>

<DocsPageParagraph>
    NumericEdit is just a specialized version of <Code>TextEdit</Code> component so all of the rules and styles are still working
    all the same. See <Link To="docs/components/text">TextEdit</Link> to find the list of supported attributes.
</DocsPageParagraph>

<DocsAttributes>
    <DocsAttributesItem Name="TValue" Type="generic">
        Generic type parameter used for the value attribute.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Value" Type="TValue" Default="default">
        Gets or sets the value inside the input field.
    </DocsAttributesItem>
    <DocsAttributesItem Name="ValueChanged" Type="@("EventCallback<TValue>")">
        Occurs after the value has changed.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Step" Type="decimal?" Default="null">
        Specifies the interval between valid values.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Culture" Type="string" Default="null">
        Helps define the localization of an element (used for parsing of the value).
    </DocsAttributesItem>
    <DocsAttributesItem Name="Min" Type="TValue" Default="default">
        The minimum value to accept for this input.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Max" Type="TValue" Default="default">
        The maximum value to accept for this input.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Autofocus" Type="bool" Default="false">
        Set’s the focus to the component after the rendering is done.
    </DocsAttributesItem>
</DocsAttributes>